<template>
  <div class="form-pending-list-wrapper">
    <div class="form-pending-list-search-wrapper">
      <el-form ref="searchForm" status-icon inline
               :rules='[]' :model="searchParams">
        <el-form-item>
          <el-button icon="reload" round type="primary" @click="search">刷新</el-button>
          <el-button icon="remove" round type="warning" :disabled="isEmpty(selectedRows)" @click="removeFormDatas">
            删除
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="form-pending-list-body-wrapper">
      <el-table height="100%" border stripe :default-sort="sortConfig" @row-click="rowClick"
                :data="dataSource" @sort-change="sortChange" @selection-change="selectionChange"
                class="form-process-todo-list-table" v-loading="loading">

        <el-table-column type="selection" width="40"/>
        <el-table-column show-overflow-tooltip sortable prop="title" label="标题"/>
        <el-table-column show-overflow-tooltip sortable prop="flowStatusInfo" label="状态"/>
        <el-table-column show-overflow-tooltip sortable prop="createTime" label="创建时间"/>
        <el-table-column show-overflow-tooltip sortable prop="expireTime" label="流程期限"/>
      </el-table>
    </div>

    <div class="form-pending-list-footer-wrapper">
      <el-pagination
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.size"
        :page-sizes="pageOptions"
        background layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total" small
        @size-change="search"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>
<script setup>
import './style.css';
import {getViewActionId, isEmpty} from '@/utils/CommonUtils';
import {getCurrentInstance, onMounted, reactive, ref, unref} from 'vue';
import TableSearchUtils from '@/utils/TableSearchUtils';
import {getAction, postAction} from '@/request/BaseRequest';
import {ElMessageBox} from 'element-plus';

const internalInstance = getCurrentInstance();
const global = internalInstance.appContext.config.globalProperties;
const props = defineProps({
  formId: undefined
});
const searchParams = reactive({
  title: undefined
});

const searchForm = ref();

onMounted(() => {
  search();
});

function onRowClick(rowData) {
  let viewActionId = getViewActionId(rowData);
  let url = `/plat/work/startProcess?action=edit&fullScreen=1&businessId=${rowData.businessId}&viewActionId=${viewActionId}&processDefinitionId=${rowData.processDefinitionId}`;
  global.$windowManager.open(url, {close: search});
}

function onSelection() {

}

function removeFormDatas() {
  let list = unref(selectedRows);
  if (isEmpty(list)) return;
  list = list.map(item => {
    return {
      id: item.id,
      businessId: item.businessId,
      formId: item.formId
    }
  });

  let data = {list};

  ElMessageBox.confirm('删除后不可恢复, 确定删除吗', '确定删除?', {
    draggable: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    postAction('/plat/collaborate/removeByIds', data).then(data => {
      if (data.success) {
        search();
      }
    });
  }).catch((e) => {
  });
}

function doSearch(searchData) {
  searchData.formId = props.formId;
  getAction('/plat/collaborate/pending/page', searchData).then(data => {
    if (data.success) {
      let result = data.result;
      setSearchResult(result);
    }
  });
}


const {
  loading, rowClick, search, selectionChange, setSearchResult, pageOptions, pageChange,
  sortChange, dataSource, resetQueryParams, sortConfig, selectedRows, pagination
} = TableSearchUtils({
  refForm: searchForm,
  doSearch,
  defaultSortConfig: {
    prop: 'createTime',
    order: 'descending',
  },
  searchParams,
  selectionChange: onSelection,
  rowClick: onRowClick
});

defineExpose({
  search
});
</script>
